<template>
   <div class="BottomOut">
       <div class="btm-top">
          <audio  autoplay :src="MusicUrl.url"   volume="0.1"  ref="audioPlayer" ></audio>
       </div>
       <div class="header-top">
          <img v-if="JSON.stringify(MusicUrl) =='{}'" @click="showLrc()" src="@/assets/img/test.jpg" alt="">
          <img v-else :src="MusicUrl.img" @click="showLrc()"> 
          <div class="header-bottom" v-if="MusicUrl.name!=''">
             <p>{{MusicUrl.name}}</p>
             <p>{{MusicUrl.nickName}}</p>
          </div>
       </div>
       <div class="player-progressBar">
           <div class="player-progressBar-top">
               <span>
                  <i class="el-icon-s-unfold" v-if="str=='按序'" @click="dispose('按序',1)"></i>
                  <i class="iconfont icon-xunhuan" v-if="str=='循环'" @click="dispose('循环',2)"></i>
                  <i class="iconfont icon-suiji1"  v-if="str=='随机'" @click="dispose('随机',0)"></i>     
               </span>
               <span><i class="iconfont icon-shangyishou" @click="nexSong(-1)"></i></span>
               <span class="ipadding"> 
               <i class="iconfont  iconfont icon-zantingtingzhi" @click="regulate(1)" v-if="changeshow"></i>
               <i class="iconfont icon-icon_play"  v-else @click="regulate(2)"></i>
               </span>
               <span class="ipadding"><i class="iconfont   iconfont icon-xiayishou" @click="nexSong(1)"></i></span>
               <span><i class="iconfont iconfont  icon-xihuan" ></i></span>
            </div>
            <div class="player-midle">
             <span style="padding-right:10px">{{playTime || "00:00"}}</span>
             <div class="block" ref="block" @click="broadenWidth($event)">
             <div class="min" ref="min" :style="{'width':broaden+'px'}"> </div>
             </div>
             <span style="padding-left:10px">{{totalTime || "00:00"}}</span>
           </div>
       </div>
       <div style="margin-right:40px;color:#4E87BA;" :class="drawer==true?'qinse':'red'" @click="showLrc">歌词</div>
      <div class="volume">
           <i class="iconfont icon-yinliang" @click="banVolume(1)"></i>
            <div class="volume-box " @click="changeVolume($event)" ref="volume">
            <div class="volume-min" ref="volume-min" :style="{'width':Volume+'px'}"> </div>
             </div>
      </div>
</div>
</template>

<script>
var volumeShow=true
var mi=0
export default {
   data(){
     return{
       MusicPlay:"",//
       broaden:0, //进度条
       time:null,   //播放定时器
       playTime:"",    //展示当前时间
       totalTime:'',    //展示歌曲总时间
       changeshow:false,  //展示当前是播放还是暂停
       index:-1,//控制播放上一首或下一首歌曲
       str:"按序",
       Arr:["按序","循环","随机"],
       AMuisc:{},
       Volume:90,
        drawer: false,
     }
   },
   computed:{
     MusicUrl(){
        return this.$Store.state.homePage.MusicUrl
     },
      Musiclist(){
        return this.$Store.state.homePage.Musiclist
     }
   },
   methods:{
      showLrc(){
       this.drawer=!this.drawer
       this.$Store.commit("showLrc",this.drawer)
      },
        dispose(str,num){
        this.str=this.Arr[num]
        console.log(this.Arr[num])
      },
      regulate(num){   //暂停和播放
        if(num==1){
          this.changeshow=false
          this.$refs.audioPlayer.pause()
          this.getAudio()
        }else{
           this.$refs.audioPlayer.play()
           this.changeshow=true
           this.getAudio()
        }

      },
     async nexSong(num){ //播放下一首 上一首
     var j=0
    if(this.str=="随机") {
        j= Math.round(Math.random()*20)
     }
       for(var i=0;i<this.Musiclist.length;i++){
          if(this.Musiclist[i].id===this.MusicUrl.id){
             console.log("打印i",i)
              this.AMuisc=this.Musiclist[i]
              this.index=i
              break 
          } 
       }
       this.index=this.index+num+j
       if(this.index>this.Musiclist.length) {
             this.index=0
             this.index=this.index+j
       }
       if(this.index==-1) return   
            const {data:res} =await this.$request("/song/url",{
                  id:this.Musiclist[this.index].id
             })
          if(res.code!=200) return 
           var data={
           url:res.data[0].url,
           time:this.Musiclist[this.index].dt,
           id:res.data[0].id,
           img:this.Musiclist[this.index].al.picUrl,
           name:this.Musiclist[this.index].name,
           nickName:this.Musiclist[this.index].ar[0].name
         }
           this.$Store.commit("passUrl",data)           
      }, 
      broadenWidth(e){  //点击进度条
            this.$refs.audioPlayer.play()
             this.changeshow=true
            var width=(e.pageX-this.$refs.block.getBoundingClientRect().left)/this.$refs.block.offsetWidth;
            console.log(width)
            this.$refs.audioPlayer.currentTime=this.$refs.audioPlayer.duration*width
            this.broaden=width*this.$refs.block.offsetWidth
            this.getAudio()
},
    getAudio(){  //当音乐加载时播放
          
          console.log("打印播放状态",this.$refs.audioPlayer.paused)
         if(this.changeshow){
            console.log("开始播放")
         if(this.broaden==NaN) return clearInterval(time)
           var time= setInterval(()=>{
                 console.log("进入循环",this.changeshow)
                 if(this.changeshow==false) return clearInterval(time)
           this.playTime=this.getTime(this.$refs.audioPlayer.currentTime)
           this.broaden= Math.ceil(this.$refs.audioPlayer.currentTime/this.$refs.audioPlayer.duration*300)            
           this.$bus.$emit("playTime",Math.floor(this.$refs.audioPlayer.currentTime))   
         if( this.broaden>=300) {
                this.broaden=300;
                console.log("清除定时器")
                this.changeshow=false
               if(this.str==="循环"){
                  console.log("进去循环")
                  this.$refs.audioPlayer.play()
                  this.changeshow=true
                   this.getAudio()  
                }else{
                  this.nexSong(1)
                }
                clearInterval(time)
             }
           },1000)
         }else{
            console.log("暂停了")
            this.changeshow=false
             clearInterval(time)
         }
         
   },
   changeVolume(e){  //点击音量
        var width=(e.pageX-this.$refs.volume.getBoundingClientRect().left)/this.$refs.volume.offsetWidth;
             console.log(width)
             this.$refs.audioPlayer.volume=width.toFixed(1)
             this.Volume=width*this.$refs.volume.offsetWidth
            //  console.log("音量长度",this.volume)
             console.log("音量值",this.$refs.audioPlayer.volume)
   },
   banVolume(num){   //点击静音
    console.log()
         if(num==1){
          volumeShow=!volumeShow
         }
         
        if(volumeShow) {
            console.log("进入true")
             if(mi!=0)  this.Volume=mi*100
              console.log("外面的",this.$refs.audioPlayer.volume)
             if(this.$refs.audioPlayer.volume==0)  this.$refs.audioPlayer.volume=this.Volume/100
        }else{
           console.log("进入false")
            mi=this.$refs.audioPlayer.volume
            this.$refs.audioPlayer.volume=0
             this.Volume=0
        }
        
   },
   getTime(time){   //处理时间
      //   var currentTime= this.$refs.audioPlayer.duration
               let m = Math.floor(time / 60);
               let s = Math.floor(time % 60);
               m = m < 10 ? '0' + m : m;
               s = s < 10 ? '0' + s : s;
               return m + ':' + s;
   }
   },
   watch:{
      MusicUrl(val){
         // console.log(val)
            this.MusicUrl=val
            if(val.url==null) {
               return  this.$message({
                    message: '播放歌曲暂未版权,请播放下一首',
                    type: 'warning'
                      });
            } 
             this.changeshow=true
            this.playTime=this.getTime(this.$refs.audioPlayer.currentTime)// 获取歌曲总时间
            this.totalTime=this.getTime(this.MusicUrl.time)// 获取正在播放时间
            console.log("调用了")
            this.banVolume()
            this.getAudio()
      },
      // Musiclist(val){
      //    this.Musiclist=val
      // }
    
   }
   
}
</script>

<style lang="less" scoped>
   .BottomOut{
     width: 100%;
     height:70px;
     background-color: #333;
     position: fixed;
     z-index:999;
     display:flex;
     bottom: 0;
     align-items: center;
     display:flex;
     .player-progressBar{
        width:60%;
        height:70px;
        display:flex;
        flex-direction:column;
       margin-left:10px;
       justify-content:center;
      .player-midle{
          display:flex;
           justify-content:center;
          align-items: center;
     .block{
     width:300px;
     height:8px;
     background-color:#E4E7ED;
     border-radius:10px;
     margin:0 10px;
     .min{
       width:0px;
       height:8px;
      background-color:#FF4E4E;
         border-radius:10px;
     }
  }
}
.player-progressBar-top{
   width:100%;
   height:40px;
   text-align:center;
   span{
      padding:10px 20px 0 20px;
     i{
         color:#fff;
         font-size:20px;
     }
   }
    }
}
   .header-top{
      height:100%;
      width:300px;
      display:flex;
      padding:5px 10px;
      img{
         width:60px;
         height:60px;
         border-radius:10px;
      }
      .header-bottom{
         p{
            font-size:13px;
            color:#fff;
            padding:7px 10px;
         }
      }
   
   }  
   .volume{
      width:120px;
      height:100%;
      display:flex;
      align-items:center;
      i{
         font-size:20px;
         color:#666666;
      }
      .volume-box{
       width:100px;
       height:7px;
       z-index:999;
       background-color:#E4E7ED;
       margin-left:10px;
       border-radius:10px;
       .volume-min{
          height:7px;
          border-radius:10px;
          background-color:#FF4E4E;
       } 
      }
   }
   .qinse{
      color:4E87BA;
   }
   .red{
      color:red
   }
   }
</style>